import Vue from "vue";
import App from "./App.vue";
import router from "./router";

// 添加全局路由守卫, 对所有的路由跳转, 在跳转前进行拦截
// router.beforeEach()
// 拦截下来的每次跳转, 都会执行一个回调函数, 我们作为参数传入
router.beforeEach((to, from, next) => {
  // to 目标路由
  // from 来源路由
  // next 放行函数
  // 如果to.path存在数组中就要校验
  // const pagesNeedAuth = ["/personal", "/Edit"];
  // pagesNeedAuth.indexOf(to.path != -1)

  if (to.meta.needAuth) {
    // 判断逻辑
    if (localStorage.getItem("token")) {
      next();
    } else {
      // this.$router 现在不是在组件, 直接用 router 就可以啦
      router.push("/login");
    }
  } else {
    next();
  }
});

// 引入vant组件库
import Vant from "vant";
// 2. 引入组件 css 文件
import "vant/lib/index.css";
// 3. 注册 vant ui 组件库的标签

// 引入 axios
import axios from "axios";

// 给引入的 axios 设置默认的基准路径
axios.defaults.baseURL = "http://127.0.0.1:3000";

// 创建axios响应拦截器
// axios.interceptors.response().use 这是注册拦截器的方法
// 拦截到的每个响应都要执行一个回调, 作为参数传入

// 由于在组件外要弹窗所以单独引入弹窗的组件
import { Toast } from "vant";
axios.interceptors.response.use((res) => {
  // 可以拦截所有请求的 res
  // 记得最后要放行, return 即可

  // 如果响应的数据是用 atatusCode 而且以4开头 就弹窗提示
  const reg = /^4\d{2}$/;
  if (reg.test(res.data.statusCode)) {
    // 弹窗提示
    // this.$toast
    Toast.fail(res.data.message || "系统错误");
  }

  // res.data是axios本身自带有的数据
  if (res.data.message == "用户信息验证失败") {
    localStorage.clear();

    router.replace("/login");
    return;
  }
  return res;
});
// 请求拦截器
axios.interceptors.request.use((config) => {
  // 条件判断, 是否需要带上 token
  // 1. 用户已登录(有token)
  // 2. 页面内的请求代码本身没有带上 Authorization
  if (localStorage.getItem("token") && !config.headers.Authorization) {
    config.headers.Authorization = "Bearer " + localStorage.getItem("token");
  }

  // 拦截一定要放行
  return config;
});

// 将 axios 挂载到 vue原型中
Vue.prototype.$axios = axios;

Vue.use(Vant);
Vue.config.productionTip = false;

new Vue({
  router,
  render: function(h) {
    return h(App);
  },
}).$mount("#app");
